<template>
    <view class="red-packet" @touchmove.stop="emptyEvent" v-if="open" @click.stop="handleOpen">
        <view class="red-packet-layout " @touchmove.stop="emptyEvent">
            <view class="red-packet-up">

                <view class="red-packet-content">
                    <video id="myVideo" src="https://oss.qmxip.com/flash_goods/1155865906077208576.mp4" @error="videoErrorCallback" :controls='false' autoplay loop></video>
                </view>

            </view>
        </view>

        <view class="cancelBox" @click.stop="handleOpen">
            <text class="iconfont">&#xeaf2;</text>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        text: {
            type: String,
            default: '暂无~~'
        }
    },
    data () {
        return {
            open: false,
        }
    },
    components: {},
    onShow () {


    },
    mounted (option) {

        this.handleOpen()
    },
    methods: {

        handleOpen () {
            // const audio = wx.createInnerAudioContext()
            // audio.src = 'https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-20.mp3'
            // audio.play()
            this.open = true

        },

        emptyEvent () {
            return false;
        },
        videoErrorCallback: function (e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
    }
}
</script>
<style scoped>
/* @keyframes open-top {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@keyframes open-up {
    0% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0);
    }
} */
.red-packet {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
}

.red-packet .red-packet-layout {
    position: relative;
}

.red-packet .red-packet-layout .red-packet-up {
    background-image: url("https://oss.qmxip.com/flash_goods/1155859685693689856.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 700rpx;
    height: 1246rpx;
    /* transform: rotateX(-90deg); */
    /* transform-origin: 50% 100%; */
}
.red-packet-content {
    position: absolute;
    background: #fff;
    height: 350rpx;
    width: 500rpx;
    left: 50%;
    transform: translateX(-50%);
    bottom: 340rpx;
    border-radius: 30rpx;
    padding: 2rpx;
    box-sizing: border-box;
}
.red-packet-content video {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
}
.cancelBox {
    position: fixed;
    z-index: 110;
    color: #fff;
    bottom: 4%;
    left: 50%;
    margin-left: -40rpx;
    font-size: 40rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: rgba(250, 250, 250, 0.1);
    border: 1px solid #eaeaea;
    text-align: center;
    line-height: 76rpx;
}
</style>